<template>
	<view class="screen">
		<view class="back">
			<image class="back-img" @click="back" src="../../../static/index/fanhui.png" mode=""></image>
			<view class="search">
				<input class="search-input" placeholder-style="color:#666666" type="text" value="" placeholder="牛奶" />
				<icon type="search" size="16" class="search-img" />
			</view>
		</view>
		
		
		<view class="content" style="height: 100vh;">
			<!-- 左侧 -->
				<view class="left" id="left">
					<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId"
						:style="{'height':windowHeight}">
						<view v-for="(item,index) in goods" :key="index" class="left-name" @click="setId(index,item)" :id="'to'+index"
							:class="leftNum==index?'leftActive':''">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			<!-- 右侧 -->
			<view class="right" id="right">
				<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true"
					:style="{'height':windowHeight}">
					<view v-for="(item,index) in goods" :key="index" >
						<!-- <view v-for="(item2,index2) in item.child" :key="index2" class="right-goods"> -->
						<view class="right-goods" :id="'po'+index">
							<!-- <view class="right-title" :id="'po'+index">
								{{item2.goodsName}}
							</view> -->
							<view class="right-content">
								<view class="right-box" v-for="(item3,index3) in item.child" :key="index3" @click="rightList(item3.id)">
									<image :src="item3.image" mode=""></image>
									<text>{{item3.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCateList} from '@/service/goods.js'//商品分类
	export default {
		data() {
			return {
				windowHeight: '0px',
				clickId: '',
				clickToId:'',
				currentNum: 0,
				topList:[],
				isLeftClick:false,
				leftNum: 0, //左侧选中效果
				//商品数组
				goods: []
			}
		},
		onShow() {
			this.getCateList();
		},
		onLoad() {
					let _that = this;
					uni.getSystemInfo({
						success: function(res) {
							_that.windowHeight = res.windowHeight + 'px';
						}
					});
					this.getNodesInfo();
				},
		created() {

		},
		mounted() {
			
		},
		methods: {
			//获取商品分类
			getCateList(){
				getCateList().then(res=>{
					this.goods = res.data;
					console.log(res,"商品分类");
					
				})
			},
			
			// 返回
			back() {
				uni.navigateBack()
			},
			//右侧菜单
			rightList(id){
				uni.navigateTo({
					url:'/myPackageA/search/searchDetail?id='+id
				})
			},
			//左边列表点击事件
			setId(index) {
				this.leftNum = index;//样式
				this.clickId = "po" + index;
				this.isLeftClick=true;
			},
			scroll(e){
							if(this.isLeftClick){
								this.isLeftClick=false;
								return;
							}
							let scrollTop=e.target.scrollTop;
							for (let i = 0; i < this.topList.length; i++) {
								let h1=this.topList[i];
								let h2=this.topList[i+1];
								if(scrollTop>=h1&&scrollTop<h2){
									this.currentNum=i;
									this.clickToId='to'+i
								}
							}
						},
						//获取节点信息
			getNodesInfo(){
							const query = uni.createSelectorQuery().in(this);
							query.select('#right').boundingClientRect().exec((res)=>{
								// console.log(res)
								// let nodes=res[0];
								let nodes = res
								let rel=[];
								nodes.map(item=>{
									rel.push(item.top);
								})
								console.log(rel)
								this.topList=rel;
							});
						},
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding-top: 176rpx;
		width: 100%;
		height: auto;
		display: flex;

		.left {
			padding-top: 44rpx;
			width: 212rpx;
			// height: 1000rpx;
			// overflow: scroll;
			 height: 100%;
			 overflow: auto;
			 position: relative;

			.left-name {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-bottom: 40rpx;
			}

			.leftActive {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7200;
			}
		}

		.right {
			padding-top: 24rpx;
			flex: 1;
			// height: 1000rpx;
			// overflow: scroll;
              height: 100%;
			 overflow: auto;
			 position: relative;
			.right-goods {
				width: 100%;
				// height: auto;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20rpx;
				padding: 50rpx 18rpx;
				margin-bottom: 60rpx;

				.right-title {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-bottom: 30rpx;
				}

				.right-content {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.right-box {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 33%;
						margin-bottom: 20rpx;

						image {
							width: 114rpx;
							height: 126rpx;
						}

						text {
							margin-top: 28rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}
				}

			}
		}
	}

	.search-input {
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding-left: 60rpx;
		width: 420rpx;
		height: 64rpx;
		z-index: 99;
	}

	.back-img {
		width: 60rpx;
		height: 55rpx;
		margin-top: 1rpx;
		margin-left: 40rpx;
	}

	.search-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 16rpx;
		left: 18rpx;
	}

	.back {
		padding-top: 80rpx;
		width: 100%;
		height: 176rpx;
		background-color: #FF7200;
		display: flex;
		align-self: center;
		position: fixed;
		top: 0;
		left: 0;
	}

	.search {
		position: relative;
	}
</style>
